import React, { Component } from 'react'
import { connect } from 'react-redux'

import { Link } from 'react-router-dom'

import menus from '@/config/menu'

import styles from './index.module.styl'

import {
    CaretRightFilled
} from '@ant-design/icons'

class Dashboard extends Component {
    handleMapMenu = (menu) => {
        if (!menu.length) return

        return menu.map((itm, idx) => (<div key={idx} className={styles.item}>
            {
                itm.sub && !!itm.sub.length ?
                    <React.Fragment>
                        {itm.name}
                        {this.handleMapMenu(itm.sub)}
                    </React.Fragment> :
                    <React.Fragment>
                        <Link to={itm.path}>{itm.name}&nbsp;<CaretRightFilled /></Link>
                    </React.Fragment>
            }
        </div>))
    }

    render() {
        return (<div className={styles.dashboard}>
            {this.handleMapMenu(menus)}
        </div>)
    }
}

const mapStateToProps = (state) => {
    return {
        userInfo: state.userInfo
    }
}

export default connect(mapStateToProps, null)(Dashboard)